<template>
    <div class="apps">
        <transition enter-active-class="anim fadeInLeft" leave-active-class="anim fadeOutRight" v-if="apps">
            <div class="page">
                <h2 v-if="checking" class="am-text-center am-margin-xl"><i class="icon icon-spinner am-icon-spin am-margin-right-xs"></i>登陆中...</h2>
            </div>
        </transition>
        <transition enter-active-class="anim fadeInLeft" leave-active-class="anim fadeOutRight" v-if="apps">
            <div class="page" v-if="!checking&&!member">
                <h3 class="am-text-center am-margin-top-lg">用户注册</h3>
                <i-form v-model="submitting" :action="loginUrl" class="form-login" @success="handleSuccess">
                    <input type="hidden" name="userId" :value="userId" />
                    <form-item label="姓名：">
                        <input type="text" name="Name" required />
                    </form-item>
                    <form-item label="手机号：">
                        <input type="text" name="Mobile" required />
                    </form-item>
                    <form-item>
                        <i-button type="submit" style="width:100%" :loading="submitting">注册</i-button>
                    </form-item>
                </i-form>
            </div>
        </transition>
        <transition v-if="apps&&apps.length" enter-active-class="anim fadeInLeft" leave-active-class="anim fadeOutRight">
            <div class="page app-list">
                <Card :icons="apps" @icon-click="handleClick">
                    <template slot="title_top">应用中心</template>
                </Card>
                <ul>
                    <li v-if="apps.length===0">
                        <h3>请等待管理员审核，审核成功后将列出您拥有的应用列表！</h3>
                    </li>
                    <li v-else v-for="item in apps" :key="item.Id" :class="{'owned':item.Owned}">
                        <i :class="item.Icon"></i>
                        <p>{{item.Name}}</p>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
    import { getList, rootUrl } from "api/app";
const COLORS = [
    "#4DA1FF",
    "#FFCD31",
    "#83D587",
    "#9587F1",
    "#FF7B8C",
    "#74e3cf",
    "#ed62cc",
    "#f56262",
    "#f1894a",
    "#a7bf34"
];
export default {
    data() {
        return {
            submitting: false,
            apps: [],
            userId: "",
            member: null,
            checking: true,
            loginUrl: rootUrl + "bind"
        };
    },
    methods: {
        handleClick(item) {
            this.$router.push({path:item.url, display: item.title});
        },
        handleSuccess(result) {
            this.member = result.Member;
            this.setApps(result.Apps);
            //this.$router.push({path:'/apps'})
        },
        setApps(apps) {
            let index= 0;
            this.apps = apps.map(item => {
                let color = item.IconColor;
                if (!color) {
                    color = index >= COLORS.length ? COLORS[COLORS.length - 1] : COLORS[index];
                    index++;
                }
                let app = { icon: item.Icon, title: item.Name, color: color, url: item.Url, clickable:true, cls: item.Owned?'owned':'' };
                return app;
            });
        }
    },
    async created() {
        try {
            var result = await getList();
            this.checking = false;
            if (result.succ) {
                this.member = result.data.Member;
                this.setApps(result.data.Apps);
            }
        } catch (e) {
            this.$Message.error("发生意外错误：" + e.message);
        }
    }
};
</script>

<style>
.apps { width: 100%; height: 100%; }
    .apps .page { 
        position: absolute; left:0; top:0; height: 100%; width: 100%; background-color: #FFF;
    }
</style>
